<script setup lang="ts">
import TabBar from '@/components/Tabbar/index.vue';
definePageMeta({
  layout: 'default2',
  title: '游戏记录',
  i18n: 'menu.gameList',
})
const { t } = useI18n();
const active = ref(0);
const tabArr = [
  {
    id: 0,
    name: t('my_page.gameList.all')
  },
  {
    id: 1,
    name: 'PG'
  },
  {
    id: 2,
    name: 'lUVA'
  },
  {
    id: 3,
    name: 'PP'
  },
  {
    id: 4,
    name: 'JILI'
  },
]
const recordsArr = ref([
  {
    id: 1,
    name: 'LUVAlogo',
    gameName: 'LEPRECHAUN RICHES',
    bet: '25.20',
    time: '2025-04-23 17:00:00',
    win: '6254.20',
    show: true,
    number: '17228022222222221'
  },
  {
    id: 2,
    name: 'LUVAlogo',
    gameName: 'LEPRECHAUN RICHES',
    bet: '25.20',
    time: '2025-04-23 17:00:00',
    win: '6254.20',
    show: true,
    number: '17222222222222201'
  },
  {
    id: 3,
    name: 'LUVAlogo',
    gameName: 'LEPRECHAUN RICHES',
    bet: '25.20',
    time: '2025-04-2317:00:00',
    win: '6254.20',
    show: true,
    number: '17222222222222801'
  },
  {
    id: 4,
    name: 'LUVAlogo',
    gameName: 'LEPRECHAUN RICHES',
    bet: '25.20',
    time: '2025-04-23 17:00:00',
    win: '6254.20',
    show: true,
    number: '17222222222222801'
  },
])
const copy = (v: string) => {
  navigator.clipboard.writeText(v)
    .then(() => {
      showSuccessToast('订已复制');
    })
    .catch(err => {
      showFailToast('复制失败');
    });
};
</script>

<template>
  <div mx-auto text-16 text-dark dark:text-white>
    <div>
      <TabBar :tabs="tabArr" :activeIndex="active" @updateActiveIndex="active = $event" :offset-top="46" />
      <div class="m-10 text-12 color-#6a6d76">{{ t('my_page.gameList.notes') }}</div>
      <!-- 主体内容 -->
      <div class="game-list">
        <div v-if="active == 0">
          <!-- 每条记录 -->
          <div class=" bg-#ffffff  rounded-10 m-10 p-16" v-for="(v, i) in recordsArr" :key="i">
            <div class="flex items-center justify-between h-15 ">
              <div class="flex items-center ">
                <img src="/img/game-record-logo.png" alt="" class="w-20">
                <span class=" px-10 py-5 ">{{ v.name }}</span>
              </div>
              <van-icon :name="v.show ? 'arrow-down' : 'arrow'" size="15" @click="v.show = !v.show" />
            </div>
            <div v-if="v.show">
              <div class="bg-#f2f1f7 py-5 text-center my-10 rounded-8"> {{ v.gameName }}</div>
              <div class="flex items-center my-10">
                <div class="mr-20">
                  <div class="text-14 color-#4e4c54">{{ t('my_page.gameList.bet') }}</div>
                  <div class=" font-bold">{{ v.bet }}</div>
                </div>
                <div class="w-2 h-30 bg-#f2f1f7 mr-20"></div>
                <div>
                  <div class="text-14  mr-10 color-#4e4c54">{{ t('my_page.gameList.win') }}</div>
                  <div class=" font-bold color-#d53b4d">{{ v.win }}</div>
                </div>
              </div>
              <div class="flex items-center justify-between">
                <div class="text-12 color-dark">{{ v.time }}</div>
                <div class="flex items-center">
                  <span class="text-12 ">局号：{{ v.number }}</span>
                  <img src="~/assets/images/copy.png" class="w-18 ml-3 mb-2" @click="copy(v.number)" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="active == 1">

        </div>
        <div v-if="active == 2">
          <div class=" bg-#ffffff  rounded-10 m-10 " v-for="(v, i) in recordsArr" :key="i">
            <div class="w-full h-30 leading-22 bg-#ccddf9  rounded-t-10 flex ">
              <div class="font-bold px-10 py-5 rounded-tl-10 rounded-br-10 bg-#6aaffc color-#ffffff">{{ v.name }}</div>
              <div class="px-10 py-5 text-12">{{ v.gameName }}</div>
            </div>
            <div class="flex items-center justify-between p-10">
              <div>
                <div class="flex justify-between items-center">
                  <div class="text-14 ">投注额</div>
                  <div class=" font-bold">{{ v.bet }}</div>
                </div>
                <div class="text-12 color-dark">{{ v.time }}</div>
              </div>
              <div>
                <div class="flex justify-between items-center">
                  <div class="text-14  mr-10">输赢</div>
                  <div class=" font-bold">{{ v.win }}</div>
                </div>
                <div class=" color-dark">
                  <span class="text-14 ">局号:</span>
                  <span class="text-12 ">{{ v.number }}</span>
                </div>
              </div>
              <div class="relative w-20 h-full">
                <img src="~/assets/images/copy.png" w-20 absolute bottom--25 right-2 @click="copy(v.number)" />
              </div>
            </div>
          </div>
        </div>
        <div v-if="active == 3">

        </div>
        <div v-if="active == 4">

        </div>
      </div>
    </div>
  </div>
</template>
<style lang="css" scoped>
.active-tab {
  color: #539cd6;
  border: 1px solid #539cd6;
  background: #ffffff;
}

.game-list {
  height: calc(100vh - 133px);
  overflow: hidden;
  overflow-y: scroll;
}
</style>